<template>
  <up-popup
    :show="show"
    mode="center"
    :safeAreaInsetBottom="false"
    :customStyle="{
      width: '280px',
      borderRadius: '20px',
      backgroundImage:
        'url(https://images-cloud.qboson.com/miniProgram/activity_modal_back)',
      backgroundSize: 'cover',
      ...customStyle,
    }"
  >
    <view class="my-activity-modal-content">
      <slot name="icon"></slot>
      <view class="title">{{ title }}</view>
      <view class="content" v-if="content">{{ content }}</view>
      <slot></slot>
      <view class="btn-group">
        <view
          class="btn-item btn-item-cancel"
          v-if="showCancelButton"
          @click="
            emit('close');
            emit('chnage', 'close');
          "
        >
          {{ cancelText }}
        </view>
        <view
          class="btn-item btn-item-confirm"
          v-if="showConfirmButton"
          @click="
            emit('confirm');
            emit('chnage', 'confirm');
          "
        >
          {{ confirmText }}
        </view>
      </view>
      <view
        class="close"
        @click="
          emit('close');
          emit('chnage', 'close');
        "
      >
        ×
      </view>
    </view>
  </up-popup>
</template>

<script setup lang="ts">
import { type CSSProperties } from "vue";

withDefaults(
  defineProps<{
    show: boolean;
    title: string;
    content?: string;
    customStyle?: CSSProperties;
    cancelText?: string;
    confirmText?: string;
    showCancelButton?: boolean;
    showConfirmButton?: boolean;
  }>(),
  {
    cancelText: "取消",
    confirmText: "确定",
    showConfirmButton: true,
  }
);
const emit = defineEmits<{
  (e: "close"): void;
  (e: "confirm"): void;
  (e: "chnage", type: "close" | "confirm"): void;
}>();
</script>

<style lang="scss">
.my-activity-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px;
  filter: drop-shadow(0px 0px 60px #FEB479);

  .title {
    margin-bottom: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 150%;
    color: #963e32;
  }

  .content {
    margin-bottom: 16px;
    text-align: center;
    font-size: 12px;
    line-height: 170%;
    color: rgba(150, 62, 50, 0.7);
  }

  .btn-group {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 100%;
    .btn-item {
      flex: 1;
      max-width: 195px;
      height: 46px;
      line-height: 46px;
      text-align: center;
      font-size: 18px;
      font-weight: 500;
      &-cancel {
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #dedede;
        color: rgba(0, 0, 0, 0.6);
      }
      &-confirm {
        background: radial-gradient(
            3% 0% at 98% 52%,
            #ffe9c2 0%,
            rgba(255, 216, 149, 0) 100%
          ),
          radial-gradient(
            32% 2% at 47% 95%,
            #ffd792 0%,
            rgba(255, 216, 149, 0) 100%
          ),
          linear-gradient(
            305deg,
            #ffc986 10%,
            #fd9869 20%,
            #ff8940 46%,
            #ff6836 61%
          );
        box-shadow:
          inset 0px -1px 5px 0px rgba(255, 255, 255, 0.5),
          inset 0px 10px 20px 0px #ffab71;
        border-radius: 8px;
        color: #ffffff;
      }
    }
  }

  .close {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translate(-50%, 100%);
    width: 36px;
    height: 36px;
    border: 1px solid #fff;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 36px;
    font-size: 20px;
  }
}
</style>
